import { computed } from 'vue';
<template>
    <view class="m-grid">
        <view v-for="(row, index) in data" class="m-grid-box">
            <view
                v-for="(item, rowIndex) in colCount"
                class="m-grid-out"
                :class="{
                    'm-grid-out-row-last': index == data.length - 1,
                    'm-grid-out-col-last': rowIndex >= row.length - 1
                }"
            >
                <view class="m-grid-inner">
                    <slot v-bind:item="row[rowIndex] ?? {} as T "></slot>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup generic="T">
import { computed } from 'vue'
const props = defineProps({
    data: { type: Array<T[]>, required: true },
    bgColor: { type: String, default: 'white' },
    borderColor: { type: String, default: '#c8c7cc' }
})
let colCount = computed(() => {
    return props.data
        .map((v) => v.length)
        .reduce((v1, v2) => {
            return v2 > v1 ? v2 : v1
        }, 0)
})
</script>

<style lang="scss" scoped>
.m-grid {
    background-color: v-bind(bgColor);
}
.m-grid-out {
    border-bottom: 2rpx solid v-bind(borderColor);
    border-right: 2rpx solid v-bind(borderColor);
    border-radius: 40rpx;
    flex-grow: 1;
}
.m-grid-inner {
    width: 100%;
    height: 100%;
    padding: 2rpx;
    text-align: center;
    background-color: v-bind(bgColor);
}
.m-grid-inner,
.m-grid-out,
.m-grid-box {
    box-sizing: border-box;
}
.m-grid-box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    max-width: 750rpx;
}
.m-grid-out-row-last {
    border-bottom: none;
}
.m-grid-out-col-last {
    border-right: none;
}
</style>
